﻿@page
@{ Layout = "_LayoutHome"; }
@section Styles{
  <style>
    .el-upload, .el-upload-dragger {width: 100%;}
    .audio-js {
      width: 100% !important;
    }
  </style>
}

<el-form v-on:submit.native.prevent ref="form" :model="form" size="small">

  <el-form-item>
    <el-radio-group v-model="form.type">
      <el-radio-button label="upload">上传音频</el-radio-button>
      <el-radio-button label="url">音频地址</el-radio-button>
      <el-radio-button label="preview">预览音频</el-radio-button>
    </el-radio-group>
  </el-form-item>
  <el-form-item v-if="form.type === 'upload'">
    <el-upload
      drag
      :action="uploadUrl"
      :auto-upload="true"
      :headers="{Authorization: 'Bearer ' + $token}"
      :show-file-list="false"
      :before-upload="uploadAudioBefore"
      :on-progress="uploadProgress"
      :on-success="uploadAudioSuccess"
      :on-error="uploadError"
      :multiple="false">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将音频文件拖到此处或点击上传，支持主流
        <el-popover
          placement="bottom"
          title="音频格式"
          width="200"
          trigger="hover"
          content="mp4、flv、f4v、webm、m4v、mov、3gp、3g2">
          <em slot="reference">音频格式</em>
        </el-popover>
      </div>
    </el-upload>
  </el-form-item>
  <el-form-item v-if="form.type === 'url'" label="音频地址" prop="audioUrl" :rules="{ required: true, message: '请输入音频地址' }">
    <el-input v-model="form.audioUrl"></el-input>
  </el-form-item>
  <el-form-item v-if="form.type === 'preview'">
    <el-card>
      <audio
        ref="audioPlayer"
        class="audio-js"
        width="100%"
        controls
        preload="auto"
        data-setup="{}">
        <source :src="form.audioUrl"></source>
      </audio>
    </el-card>
  </el-form-item>

  <el-form-item>
    <el-checkbox label="自动播放" v-model="form.isAutoPlay"></el-checkbox>
  </el-form-item>

</el-form>

<el-divider></el-divider>
<el-row align="right" style="margin-right: 5px; margin-top: 10px;">
  <el-col :span="24" align="right">
    <el-button size="small" type="primary" v-on:click="btnSubmitClick">确 定</el-button>
    <el-button size="small" v-on:click="btnCancelClick">取 消</el-button>
  </el-col>
</el-row>

@section Scripts{
  <script src="/sitefiles/assets/js/home/common/editorLayerAudio.js" type="text/javascript"></script>
}